<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
  <title>Thrive Mobile Application</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  

	<!--- Some jquery stuff --->
	<link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.css" type="text/css" />
    <link rel="stylesheet" href="../../scripts/jquery.mobile-1.0.1/thrive-theme.css" type="text/css">
    <script src="../../scripts/jquery.mobile-1.0.1/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="../../scripts/Thrive.js"  type="text/javascript"></script>

    <script src="Feel.js" type="text/javascript"></script>
    <script src="../../scripts/jquery.mobile-1.0.1/jquery.mobile-1.1.0-rc.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="../../css/style.css" type="text/css" />
	
</head>

<body>

	<div id="feel" data-role="page" data-theme="a">
    
    <script type="text/javascript">
	
		$("#feel").live('pagecreate', function() {
			feel_prefetch();
		});
		
		$(".popup_container").live('click', function() {
			removePopup();
		});
		
		$(".popup_container").live('tap', function() {
			removePopup();
		});
		
		$(".popup_container").bind('touchstart', function()  {
			removePopup();
		});
		
		$("#submit_feel").live('click', function() {
			sendFeel();
		});
	</script>
    
    <div class="popup_container" style="display:none;">
        <div class="popup"></div>
    </div>

    <div data-role="header" data-theme="a">
    	<a href="../../index.html" data-role="button" data-icon="arrow-l">Thrive</a>
        <h1>Feel</h1>
        <a href="info.html" data-icon="info">Info</a>
    </div>
	
    <div data-role="content" data-theme="a">
    
    <div id="info">
    <p>This is a place for you to show how you are feeling each day.
            You can see if working on Shine and Gather affects how you feel each day.</p>
    </div>
	
	<form id="feel_form" selected="true">
		<fieldset>
            
            <div class="row">
            <label for="slider-0">Happy:</label>
            <input type="range" name="happy_score" id="slider-0" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-1">Sad:</label>
            <input type="range" name="sad_score" id="slider-1" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-2">Calm:</label>
            <input type="range" name="calm_score" id="slider-2" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-3">Mad:</label>
            <input type="range" name="mad_score" id="slider-3" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-4">Worried:</label>
            <input type="range" name="worried_score" id="slider-4" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-5">Stressed:</label>
            <input type="range" name="stressed_score" id="slider-5" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>
            
            <div class="row">
            <label for="slider-6">Excited:</label>
            <input type="range" name="excited_score" id="slider-6" value="5" min="0" max="10" data-highlight="true" onkeypress="validate(event)" />
            </div>


        </fieldset>
		<a id="submit_feel" type="submit" data-role="button">Submit</a>
	</form>
    
    </div>
    
    </div>

</body>

</html>
